<template>
  <div>
    <input type="text" class="int1" placeholder="搜索" v-model="type" @keydown.enter="tz"/>
    <div class="box">
      <p style="overflow: hidden;margin-top:1rem">
        <span style="font-size: 1.2rem">最近搜索</span>
        <span style="float: right; color: rgb(255, 185, 0); margin-top: 0.2rem"
          >全部清除</span
        >
      </p>
      <van-list
        style="margin-top:1rem">
        <van-cell v-for="item in list" :key="item"  >
            <span style="float: left; margin-right: 0.5rem">{{item}}</span>
            <span>X</span>
        </van-cell>
        
      </van-list>
    </div>
  </div>
</template>

<script setup>
import { reactive,ref} from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();
const type = ref("")
const list = reactive([
  '经典剪发理发店',
  '夏普男士理发店',
  '绅士的巢穴',
  '城市边缘理发店',
  '精致理发师休息室',
]);
const tz = ()=>{
  router.push({path:'/ss_show',query:{type:type.value}})
}
</script>

<style lang="scss" scoped>
.int1 {
  width: 17rem;
  margin-top: 1rem;
  height: 3rem;
  line-height: 3rem;
  border-radius: 1rem;
  color: black;
  margin-left: 1.1rem;
  border: 1px solid rgb(212, 212, 212);
  background: url('/搜索.png') no-repeat left center;
  padding-left: 70px; /* 根据图片大小调整 */
  background-size: 40px; 
  background-position-x:10px;

}
.box {
  width: 21rem;
  margin-top: 1rem;
  margin: 0 auto;
}
</style>